<template>
  <div style="margin: 0px 20px 4px 10px; padding-top: 2px;">
    <el-dropdown trigger="click" @command="onCommand">
      <div>
        <svg-icon style="color:#fff;font-size:20px" icon-class="language" />
      </div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="zh" :class="{active: $root.$i18n.locale === 'zh'}">中文</el-dropdown-item>
        <el-dropdown-item command="en" :class="{active: $root.$i18n.locale === 'en'}">English</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import Cookie from 'js-cookie'
export default {
  data() {
    return {

    }
  },

  created() {

  },

  methods: {
    onCommand(type) {
      this.$root.$i18n.locale = type
      Cookie.set('lang', type)
      this.$router.go(0)
    }
  }
}
</script>

<style scoped lang='scss'>
.active {
  background-color: #ecf5ff;
  color: #66b1ff;
}
</style>
